<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>ECHarts</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body class="gray-bg">
   <div class="form-group">
	 <label for="exampleInputEmail1">Job ID</label><input type="text" class="form-control id-text" />
	</div>
	<button type="submit" class="btn btn-default submit-btn">Submit</button>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>折线图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>柱状图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">

                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>
       
                    
                </div>
         
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>



    <!-- ECharts -->
    <script src="js/plugins/echarts/echarts-all.js"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>


    <!-- ECharts demo data -->
<!--     <script src="js/demo/echarts-demo.js"></script> -->
    <script>
    $(function (){
    	$(".submit-btn").click(function(){
            var xData = new Array();
            var yData = new Array();
    		var jobId = $(".id-text").val();
	    	htmlobj=$.ajax({
	    		type:"post",
	    		url:"ReadResultServlet",
	    		 data:{
	                  "jobID":jobId
	              },
	    		async:false,
	    		dataType:"text"
	    	});
	    	var result = htmlobj.responseText;
	    	var rowsArray = result.split('\n');
	    	rowsArray.pop();

	    	for (var j in rowsArray){
	    		var str = rowsArray[j];
	    		//alert(str);
	    		var strArray  = str.split('\t')
	    		
	    	    for(var i in strArray){
	    	    	if (i==0){
	    	    		xData.push(strArray[i]);
	    	    	}
	    	    	else if (i==1){
	    	    		yData.push(parseInt(strArray[i]));
	    	    	}
	    	         //alert(strArray[i]);
	    	    }
	    		
	     		//alert(rowStr);
	    		
	    	}
	    	alert(jobId+"\n"+xData+"\n"+yData);
	    	
	        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
	        var lineoption = {
	        		 xAxis: {
	        			    type: 'category',
	//         			    data: ['第1季度', '第2季度', '第3季度', '第4季度']
	        				data: xData
	        		},
	      			  yAxis: {
	      			    type: 'value'
	      			  },
	      			  series: [
	      			    {
	      			    	data: yData,
	      			      //data: [471348, 918589, 1061129, 841613],
	      			      type: 'line'
	      			    }
	      			  ]
	        };
	        lineChart.setOption(lineoption);
	        $(window).resize(lineChart.resize);
	
	        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
	        var baroption = {
	        		 xAxis: {
	     			    type: 'category',
	     			    data: xData
	     		},
	   			  yAxis: {
	   			    type: 'value'
	   			  },
	   			  series: [
	   			    {
	   			      data: yData,
	   			      type: 'bar'
	   			    }
	   			  ]
	        };
	        barChart.setOption(baroption);
	
	        window.onresize = barChart.resize;
    	});
	});
    </script>

    
    

</body>

</html>
